<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>vue2_demo</title>
    <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>

</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js',
                name: "onceweb",
            },
            beforeCreate() {
                console.log("创建之前")
                console.log(this.$el)
                console.log(this.$data)
            },
            created() {
                console.log("成功创建")
                console.log(this.$el)
                console.log(this.$data)
            },
            beforeMount() {
                console.log("挂载之前")
                console.log(this.$el)
                console.log(this.$data)
            },
            mounted() {
                console.log("成功挂载")
                console.log(this.$el)
                console.log(this.$data)
            },
            beforeUpdate() {
                console.log("更新之前")
                let name = this.$refs.app.innerHTML
                console.log('name:' + name)
            },
            updated() {
                console.log("成功更新")
                let name = this.$refs.app.innerHTML
                console.log('name:' + name)
            },
            beforeDestory() {
                console.log("销毁之前")
            },
            destoryed() {
                console.log("成功销毁")
            }
        })
    </script>
</body>

</html>